<!DOCTYPE html>
<html lang="zh-CN">
<head>
  {% block title %}<title>本地图书馆</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <!-- 添加额外的CSS文件 -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
  <style>
    /* 侧边栏样式 */
    .sidebar {
      background-color: #f8f9fa;
      border-right: 1px solid #dee2e6;
      min-height: 100vh;
      padding-top: 20px;
      /* 增加左侧内边距 */
      padding-left: 10px; 
    }

    .sidebar-nav {
      font-size: 1.1em;
      line-height: 1.8;
    }

    .sidebar-nav li a {
      color: #333;
      display: block;
      padding: 5px 15px;
      border-radius: 5px;
    }

    .sidebar-nav li a:hover {
      background-color: #e2e6ea;
      text-decoration: none;
    }

    /* 主内容区域样式 */
    .main-content {
      background-image: url("{% static 'images/django背景.jpg' %}");
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border-radius: 5px;
      min-height: calc(100vh - 120px); /* 减去顶部栏高度 */
    }

    /* 分页样式 */
    .pagination {
      margin-top: 20px;
    }

    /* 顶部栏样式 */
    .top-bar {
      background-color: #007bff;
      color: white;
      /* 增加上下内边距以增大顶部栏高度 */
      padding: 20px 20px; 
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .top-bar a {
      color: white;
    }

    .top-bar a:hover {
      text-decoration: underline;
    }

    .top-bar .left-section {
      display: flex;
      align-items: center;
    }

    .top-bar .right-section {
      display: flex;
      align-items: center;
    }

    /* 为右侧区域的链接设置更大的左外边距 */
    .top-bar .right-section a {
      /* 进一步增大间距 */
      margin-left: 25px; 
    }
    /* 为注销表单添加左侧外边距 */
    .top-bar .right-section #logout-form {
      margin-left: 25px; 
    }
  </style>
</head>
<body>
  <!-- 顶部栏 -->
  <div class="top-bar">
    <div class="left-section">
      <a href="{% url 'index' %}"><i class="fas fa-home"></i> 首页</a>
      {% if user.is_staff %}
          <span style="margin-left: 15px;"><i class="fas fa-user-shield"></i> 管理员</span>
          <a href="{% url 'user-management' %}" style="margin-left: 15px;"><i class="fas fa-users-cog"></i> 用户管理</a>
          <a href="{% url 'all-borrowed' %}" style="margin-left: 15px;"><i class="fas fa-book"></i> 借阅管理</a>
      {% endif %}
    </div>
    <div class="right-section">
      {% if user.is_authenticated %}
        <span><i class="fas fa-user"></i> 用户: {{ user.get_username }}</span>
        <a href="{% url 'my-borrowed' %}"><i class="fas fa-book-reader"></i> 我的借阅</a>
        <form id="logout-form" method="post" action="{% url 'logout' %}" style="display: inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-link text-white p-0"><i class="fas fa-sign-out-alt"></i> 注销</button>
        </form>
      {% else %}
        <a href="{% url 'login'%}?next={{request.path}}"><i class="fas fa-sign-in-alt"></i> 登录</a>
      {% endif %}
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <!-- 侧边栏 -->
      <div class="col-sm-2 sidebar">
        {% block sidebar %}
        <ul class="sidebar-nav">
          <li><a href="{% url 'bookinstances' %}"><i class="fas fa-book"></i> 所有书籍副本</a></li>
          <li><a href="{% url 'books' %}"><i class="fas fa-book-open"></i> 所有书籍</a></li>
          <li><a href="{% url 'authors' %}"><i class="fas fa-user-edit"></i> 所有作者</a></li>
          <li><a href="{% url 'genres' %}"><i class="fas fa-tags"></i> 所有类型</a></li>
          <li><a href="{% url 'languages' %}"><i class="fas fa-language"></i> 所有语言</a></li>
        </ul>

        {% if user.is_staff %}
          <hr>
          <ul class="sidebar-nav">
            {% if perms.catalog.add_genre %}
              <li><a href="{% url 'genre-create' %}"><i class="fas fa-plus"></i> 创建类型</a></li>
            {% endif %}
            {% if perms.catalog.add_language %}
              <li><a href="{% url 'language-create' %}"><i class="fas fa-plus"></i> 创建语言</a></li>
            {% endif %}
            {% if perms.catalog.add_author %}
              <li><a href="{% url 'author-create' %}"><i class="fas fa-plus"></i> 创建作者</a></li>
            {% endif %}
            {% if perms.catalog.add_book %}
              <li><a href="{% url 'book-create' %}"><i class="fas fa-plus"></i> 创建书籍</a></li>
            {% endif %}
            {% if perms.catalog.add_bookinstance %}
              <li><a href="{% url 'bookinstance-create' %}"><i class="fas fa-plus"></i> 创建书籍副本</a></li>
            {% endif %}
          </ul>
        {% endif %}
        {% endblock %}
      </div>
      <!-- 主内容区域 -->
      <div class="col-sm-10 main-content">
        {% block content %}{% endblock %}

        {% block pagination %}
          {% if is_paginated %}
              <div class="pagination">
                  <span class="page-links">
                      {% if page_obj.has_previous %}
                          <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">上一页</a>
                      {% endif %}
                      <span class="page-current">
                          第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页。
                      </span>
                      {% if page_obj.has_next %}
                          <a href="{{ request.path }}?page={{ page_obj.next_page_number }}">下一页</a>
                      {% endif %}
                  </span>
              </div>
          {% endif %}
        {% endblock %}
      </div>
    </div>
  </div>
</body>
</html>
